<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/5/6
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="/plugins/adminLte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/css/global.css">
    <script type="text/javascript" src="/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="/js/core/helper.js"></script>
    <script src="/plugins/layui/layui.js"></script>
    <script type="text/javascript" src="/js/core/building_utils.min.js?v=62"></script>
</head>
<body>
<div class="box box-primary">
    <div class="box-frame-with-header">
        <div class="box-header with-border">
            <h4 class="box-title">公告信息添加</h4>
        </div>
        <div class="box-body">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">公告标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-pane" style="margin-top: 15px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">展示时间</label>
                        <div class="layui-input-inline">
                            <input name="startTime" lay-verify="startTime" class="layui-input" placeholder="开始日"
                                   id="LAY_demorange_s">
                        </div>
                        <div class="layui-input-inline">
                            <input name="endTime" lay-verify="endTime" class="layui-input" placeholder="截止日"
                                   id="LAY_demorange_e">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">公告内容</label>
                    <div class="layui-input-block">
                        <textarea name="content" lay-verify="content" placeholder="请输入内容"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-tab" lay-filter="layuiTab">
                        <ul class="layui-tab-title">
                            <li class="layui-this" lay-id="tab1">按小区添加</li>
                            <li lay-id="tab2">按房号添加</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <table class="layui-table">
                                    <colgroup>
                                        <col width="150">
                                        <col>
                                        <col width="150">
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>小区编号</th>
                                        <th>小区名</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody"></tbody>
                                </table>

                                <div class="layui-form-item">
                                    <button style="margin-top:8px" class="layui-btn" lay-submit="" lay-filter="submitComm">确定添加</button>
                                    <div style="float:right;margin-right:1px;" id="page"></div>
                                </div>
                            </div>
                            <div class="layui-tab-item" style="height: 50%">
                                <label class="layui-form-label">房号选择</label>
                                <div class="layui-input-inline">
                                    <select name="selectComm" id="selectComm" lay-filter="selectComm">
                                        <option value="">请请选小区</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="selectBuilding" id="selectBuilding" lay-filter="selectBuilding">
                                        <option value="">请选择楼栋</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="selectUnit" id="selectUnit" lay-filter="selectUnit">
                                        <option value="">请选择单元</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="selectFloor" id="selectFloor" lay-filter="selectFloor">
                                        <option value="">请选择楼栋</option>
                                    </select>
                                </div>
                                <div class="layui-input-inline">
                                    <select name="selectRoom" id="selectRoom" lay-filter="selectRoom">
                                        <option value="">请选择房号</option>
                                    </select>
                                </div>

                                <button class="layui-btn" lay-submit="" lay-filter="roomComm">确定添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    var form;
    layui.use(['form', 'laypage', 'layedit', 'laydate', 'element'], function () {
        form = layui.form();
        var layer = layui.layer;
        var laydate = layui.laydate;
        var element = layui.element();
        var timeTest = /^(\d{4})-(\d{2})-(\d{2})$/;
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 2) {
                    return '标题至少得2个字符!';
                }
            },
            startTime: function (value) {
                if (!timeTest.test(value)) {
                    return '开始时间必须选择!';
                }
            },
            endTime: function (value) {
                if (!timeTest.test(value)) {
                    return '截止时间必须选择!';
                }
            }
            , content: function (value) {
                if (value.length < 5) {
                    return '内容至少得5个字符!';
                }
            }
        });

        //监听Tab切换，以改变地址hash值
        element.on('tab(layuiTab)', function () {
            if (this.getAttribute('lay-id') == 'tab2') {
                setSelectComm();
            }
        });

        //小区添加提交
        form.on('submit(submitComm)', function (data) {
            if ((Array.isArray(commCodes) && commCodes.length == 0)
                || (Object.prototype.isPrototypeOf(commCodes) && Object.keys(commCodes).length == 0)) {
                layer.msg('请选择你需要添加通知的小区', {icon: 5});
                return false;
            }
            var params = {
                type: 0,
                title: data.field.title,
                content: data.field.content,
                startTime: data.field.startTime,
                endTime: data.field.endTime,
                comms: commCodes.join(','),
                roomNum: ""
            };
            postJson("/NoticeCtrl/addNotice.x", params, function (data) {
                window.location.reload();
                layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            });
            return false;
        });

        //房号添加提交
        form.on('submit(roomComm)', function (data) {
            var comm = $("select[name='selectComm']").val();
            var building = $("select[name='selectBuilding']").val();
            var unit = $("select[name='selectUnit']").val();
            var floor = $("select[name='selectFloor']").val();
            var room = $("select[name='selectRoom']").val();
            if (comm == '' || building == '' || unit == '' || floor == '' || room == '') {
                layer.msg('选择房号错误', {icon: 5});
                return false;
            }

            var params = {
                type: 1,
                title: data.field.title,
                content: data.field.content,
                startTime: data.field.startTime,
                endTime: data.field.endTime,
                comms: "",
                roomNum: comm + building + unit + floor + room
            };

            postJson("/NoticeCtrl/addNotice.x", params, function (data) {
                window.location.reload();
                layer.msg('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加成功', {icon: 6});
            });
            return false;
        });

        var start = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            , max: '2099-06-16 23:59:59'
            , istoday: false
            , choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };

        //监听checkbox
        form.on('checkbox(selectComm)', function (data) {
            var commCode = data.value;
            if (data.elem.checked == true) {
                commCodes.push(commCode);
            } else {
                var j = -1;
                for (var i in commCodes) {
                    if (commCodes[i] == commCode) {
                        j = i;
                        break;
                    }
                }
                if (j != -1) {
                    commCodes.splice(j, 1);
                }
            }
        });

        document.getElementById('LAY_demorange_s').onclick = function () {
            start.elem = this;
            laydate(start);
        };
        document.getElementById('LAY_demorange_e').onclick = function () {
            end.elem = this
            laydate(end);
        };
        queryCommList();
    });

    var commCodes = [];
    var modelParam = {};
    modelParam.pageSize = 5;

    function queryCommList() {
        var param = {};
        param.pageSize = modelParam.pageSize;
        param.page = 1;
        postJson("/comm/findCommListPage.x", $.param(param), function (data) {
            $('#tbody').empty();
            render(data.list);
            layui.laypage({
                cont: 'page'
                , pages: Math.ceil(data.size / modelParam.pageSize)
                , jump: function (row, first) {
                    if (!first) {
                        param.page = row.curr;
                        queryPage(param);
                    }
                }
            });
        });
    }

    function render(list) {
        $('#tbody').append();
        for (var i in list) {
            var checked = "";
            for (var j in commCodes) {
                if (list[i].comm_code == commCodes[j]) {
                    checked = "checked=checked"
                    break;
                }
            }
            $('#tbody').append(
                '<tr>' +
                '<td>' + list[i].comm_code + '</td>' +
                '<td>' + list[i].comm_name + '</td>' +
                '<td><input type="checkbox" name="selectComm"  lay-filter="selectComm" lay-skin="primary" ' + checked + ' value="' + list[i].comm_code + '"></td>' +
                '</tr>'
            );
        }
        form.render('checkbox');
    }

    function queryPage(param) {
        postJson("/comm/findCommListPage.x", $.param(param),
            function (data) {
                $('#tbody').empty();
                render(data.list);
            });
    }
</script>

</body>
</html>
